<template>
  <div id="fullpage" >
    <div id="register-thead">
      <el-form :inline="true" :model="theadformInline" class="thead-form-inline">
        <el-form-item label="身份证号" >
          <el-input class="thead-form-input"  v-model="theadformInline.patientCard" autofocus="true" placeholder="身份证号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="thead-form-button"  type="primary" @click="onSubmit" icon="el-icon-search">加载身份证号</el-button>
          <el-button class="thead-form-button" type="warning" @click="onSubmit" icon="el-icon-search">加载患者信息</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="register-tbody">
      <el-form :inline="true" :model="tbodyformInline" class="tbody-form-inline">
        <el-form-item label="身份证号" required class="tbody-form-item ">
          <el-input class="tbody-form-input" v-model="tbodyformInline.patientCard" placeholder="身份证号"></el-input>
        </el-form-item>
        <el-form-item label="患者姓名" required class="tbody-form-item">
          <el-input class="tbody-form-input" v-model="tbodyformInline.patientName" placeholder="患者姓名"></el-input>
        </el-form-item>
        <el-form-item label="患者电话" required class="tbody-form-item">
          <el-input class="tbody-form-input" v-model="tbodyformInline.patientPhone" placeholder="患者电话"></el-input>
        </el-form-item>
        <el-form-item label="性别" class="tbody-form-item">
          <el-radio-group v-model="tbodyformInline.patientSex"  size="small">
            <el-radio  label="2">男</el-radio>
            <el-radio  label="1">女</el-radio>
            <el-radio  label="0">未知</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期"  class="tbody-form-item tbody-form-margin">
          <el-date-picker
            v-model="tbodyformInline.patientBirthday"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @blur="computeAge"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="患者年龄"  class="tbody-form-item tbody-form-margin">
          <el-input class="tbody-form-input" v-model="tbodyformInline.patientAge" placeholder="患者年龄"></el-input>
        </el-form-item>
        <el-form-item label="地址信息"  class="tbody-form-item tbody-form-margin">
          <el-input class="tbody-form-input tbody-input-address" v-model="tbodyformInline.patientAddress" placeholder="地址信息" ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div id="register-tabs">
      <el-radio-group v-model="tabPosition" style="margin-top: 10px;margin-left:30px;">
        <el-radio-button v-for="tab in reg_fee_name" :key="tab.rfeeId" :label="tab.rfeeId">{{tab.rfeeName}}</el-radio-button>
      </el-radio-group>
      <!--      设置挂号费用-->
      <div v-for="t in reg_fee_name" style="float: right;margin-top: 10px;">
        <span v-if="t.rfeeId == tabPosition" style="font-size:15px;">
          挂号费:{{t.rfeePrice}}&yen;
          <el-button  type="danger" @click="submitCharge" icon="el-icon-search">挂号收费</el-button>
        </span>
      </div>
    </div>
<!--    科室信息-->
    <div id="register-tfoot">
<!--      数据条件筛选区域-->
        <div id="register-tfoot-form">
          <el-form :inline="true" :model="tfootform" class="tfoot-form-inline">
            <el-form-item label="所属科室">
              <el-select size="small" v-model="queryParams.deptId" placeholder="请选择所属科室">
                <el-option style="width: 180px" v-for="d in tfootform.dept" :key="d.deptId" :label="d.deptName" :value="d.deptId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="挂号类型">
              <el-select size="small" v-model="queryParams.rfeeId" placeholder="请选择挂号类型">
                <el-option  v-for="reg in tfootform.reg_fee" :key="reg.rfeeId"  :label="reg.rfeeName" :value="reg.rfeeId" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="挂号时段">
              <el-select size="small"  v-model="queryParams.registerPotime" placeholder="请选择挂号时段">
                <el-option  label="上午" value="1"></el-option>
                <el-option  label="下午" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item  size="small" label="挂号时间">
              <el-date-picker style="width: 200px"
                v-model="queryParams.registerDate"
                type="date"
                value-format="yyyy-MM-dd"
                 placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="onQuery">查询</el-button>
              <el-button size="small" type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
<!--      数据展示区域-->
      <div>
        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          @current-change="handleCurrentChange">
          <el-table-column
            type="index"
            width="55">
          </el-table-column>
          <el-table-column
            label="部门编号"
            >
            <template slot-scope="scope">{{ scope.row.deptId }}</template>
          </el-table-column>
          <el-table-column
            label="部门名称"
            >
            <template slot-scope="scope">{{ scope.row.deptName }}</template>
          </el-table-column>
          <el-table-column
            label="当前号数"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.orderNum }}</template>
          </el-table-column>
        </el-table>
      </div>
      <!--设置分页-->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.queryParams.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="this.queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.queryParams.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

  import { selectPatient,selectList,getDeptInfo,register,selectDeptInfo} from "@/api/kbjz/register";
    export default {
        name: "index",
        data() {
            return {
                theadformInline: {
                    patientCard: '',
                },
                tbodyformInline:{
                    patientCard:'',
                    patientName:'',
                    patientPhone:'',
                    patientSex:'0',
                    patientBirthday:'',
                    patientAge:'',
                    patientAddress:'',
                    rfeeId:undefined
                },
                tabPosition: '1',
                reg_fee_name:[],
                //tfoot的表单数据
                tfootform: {
                    reg_fee: [],
                    dept:[],
                },
                tableData: [],
                total:undefined,
                queryParams:{
                    pageNum: 1,
                    pageSize: 10,
                    total:undefined,
                    deptId:undefined,
                    rfeeId:undefined,
                    registerDate:undefined,
                    registerPotime:undefined,
                },
                currentRow:'',
            }
        },
        created(){
            selectList().then(
                res=>{
                    this.reg_fee_name = res.data;
                    this.tfootform.reg_fee = res.data;
                }
            );
            getDeptInfo().then(
                res=>{
                    this.tfootform.dept = res.rows;
                    this.tableData = res.rows;
                    this.queryParams.total = res.total;
                }
            );
        },
        methods: {

            /**提交按钮*/
            onSubmit() {
                selectPatient(this.theadformInline.patientCard).then(
                    res=>{
                        if (res.data != null && res.data != ''&& res.data != null){
                            this.tbodyformInline.patientCard=res.data.patientCard,
                            this.tbodyformInline.patientName=res.data.patientName,
                            this.tbodyformInline.patientPhone=res.data.patientPhone,
                            this.tbodyformInline.patientSex=res.data.patientSex+'',
                            this.tbodyformInline.patientBirthday=res.data.patientBirthday,
                            this.tbodyformInline.patientAge=res.data.patientAge,
                            this.tbodyformInline.patientAddress=res.data.patientAddress
                        }else{
                            this.$message({
                                showClose: true,
                                message: '患者还未录入系统',
                                type: 'error'
                            });

                        }
                    }
                );
            },
            //自动计算患者年龄
            computeAge: function (date) {
                let current = new Date();
                var year = current.getFullYear();
                var arr =date.value.split(`-`);
                var oldyear =arr[0];
                this.tbodyformInline.patientAge =year -oldyear;
            },
            //挂号收费按钮
            submitCharge(){
                this.tbodyformInline.rfeeId = this.tabPosition;
                this.tbodyformInline.deptId = this.currentRow.deptId;
                this.tbodyformInline.pipeNum = this.currentRow.orderNum;
                register(this.tbodyformInline).then(
                    res=>{
                        if (res.code == 200){
                            getDeptInfo().then(
                                res=>{
                                    console.log(res)
                                    this.tfootform.dept = res.rows;
                                    this.tableData = res.rows;
                                    this.queryParams.total = res.total;
                                }
                            );
                        }
                    }
                );
            },
            //查询科室信息
            onQuery(){
                selectDeptInfo(this.queryParams).then(
                    res=>{
                        console.log(res)
                        this.tableData = res.rows;
                        this.queryParams.total = res.total;
                    }
                );
            },
            onReset(){
                this.queryParams.deptId=undefined,
                this.queryParams.rfeeId=undefined,
                this.queryParams.registerDate=undefined,
                this.queryParams.registerPotime=undefined
            },
            handleSizeChange(val) {
                this.queryParams.pageSize = val;
            },

            handleCurrentChange(val){
                this.currentRow = val;
            }

        }
    }
</script>

<style scoped>

    #register-thead{
        margin: 20px 10px 10px 10px ;
        box-shadow: 0px 0px 2px 2px #EBEEF5;
        height: 80px;
    }
  .thead-form-inline{
      position: absolute;
      top: 40px;
      left:50px;
  }
    .thead-form-input{
        width: 500px;
    }

   #register-tbody{
     margin: 20px 10px;
     box-shadow: 0px 0px 2px 2px #EBEEF5;
     height: 150px;
   }
  .tbody-form-item{
      margin-top: 20px;
      margin-left: 30px;
  }
  .tbody-form-margin{
      margin-top: 0px;
  }
  .tbody-input-address{
     width: 400px;
  }

  /**设置切片*/
  #register-tabs{
    margin: 20px 10px 10px 10px ;
    box-shadow: 0px 0px 2px 2px #EBEEF5;
    height: 60px;
  }

/*  设置科室信息*/
  #register-tfoot{
    margin: 20px 10px 10px 10px ;
    box-shadow: 0px 0px 2px 2px #EBEEF5;
    padding: 10px 0px;
  }

</style>
